<template>
  <el-dialog v-loading="loading" :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" title="荣誉审批" width="1200px" top="3vh" @close="closeDlg">
    <el-row>
      <el-col :span="17">
        <table class="billinfo-table" width="100%">
          <tr>
            <td colspan="2"><div class="bill-item"><label>申请标题</label><p>{{ entity.applyName }}</p></div></td>
          </tr>
          <tr>
            <td width="50%"><div class="bill-item"><label>申请人</label><p>{{ entity.applicantName }}</p></div></td>
            <td width="50%"><div class="bill-item"><label>申请时间</label><p>{{ entity.applyTime | parseTime("{y}-{m}-{d}") }}</p></div></td>

          </tr>
          <tr>
            <td><div class="bill-item"><label>所属部门</label><p>{{ entity.deptName }}</p></div></td>
            <td><div class="bill-item"><label>荣誉名称</label><p>{{ entity.name }}</p></div></td>
          </tr>
          <tr>
            <td><div class="bill-item"><label>获奖时间</label><p>{{ entity.gotTime | parseTime("{y}-{m}-{d}") }}</p></div></td>
            <td><div class="bill-item"><label>荣誉类型</label><p>{{ entity.typeName }}</p></div></td>
          </tr>

          <tr>
            <td colspan="2"><div class="bill-item"><label style="width:160px;">获得教师、学生、部门</label><p>{{ entity.winner }}</p></div></td>
          </tr>
          <tr>
            <td colspan="2"><div class="bill-item"><label style="width:160px;">获得人所属部门、班级</label><p>{{ entity.winDept }}</p></div></td>
          </tr>
          <tr>
            <td><div class="bill-item"><label>颁发部门</label><p>{{ entity.givingDept }}</p></div></td>
            <td><div class="bill-item"><label>荣誉级别</label><p>{{ entity.publishLevelName }}</p></div></td>
          </tr>
          <tr>
            <td colspan="2"><div class="bill-item"><label>描述说明</label><p>{{ entity.content }}</p></div></td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="bill-item"><label>附件</label>
                <p>
                  <a v-for="(po) in appendFileList" :key="po.url" :download="po.name" :href="po.url" style="margin-bottom:8px;display: block" target="_blank">{{ po.name }}</a>
                </p>
              </div>
            </td>
          </tr>
        </table>
      </el-col>
      <el-col :span="7">
        <div class="right-approve-panel">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b style="color:#ffcc66">审批申请</b>
            </div>
            <div>
              <el-form ref="pform" v-enter2tab="true" :model="form" :rules="rules" size="small">
                <el-form-item label="是否通过" prop="passed">
                  <el-radio v-model="form.passed" :label="false"><span style="color:orange;"> 不通过</span></el-radio>
                  <el-radio v-model="form.passed" :label="true"><span style="color:#33cc00;">通过</span></el-radio>
                </el-form-item>
                <el-form-item label="审批意见" prop="comment">
                  <el-input v-model="form.comment" type="textarea" maxlength="300" autocomplete="off" :rows="5" />
                </el-form-item>
              </el-form>
            </div>
            <div class="transfer-user-box">
              <div class="transfer-user-box-label">委托办理</div>
              <el-form ref="tform" :model="tform" :rules="tRules" size="small">
                <el-form-item prop="userId">
                  <el-input v-model="tform.userName" placeholder="请选择委托人" disabled style="width:170px;margin-right:10px;">
                    <el-button slot="append" icon="el-icon-search" @click="doSelectUser" />
                  </el-input>
                  <el-button type="info" @click="doTransfer">委托</el-button>
                </el-form-item>
              </el-form>

            </div>
            <div class="approve-footer">
              <el-button type="text" @click="closeDlg">取消</el-button>
              <el-button type="primary" @click="doSubmit">确认</el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="process-diagram-box">
        <div>
          <el-button plain @click="showDiagram">流程图...<i :class="['el-icon--right',diagramShowed?'el-icon-arrow-down':'el-icon-arrow-right' ]" /></el-button>
        </div>
        <el-collapse-transition>
          <div v-show="diagramShowed" class="box">
            <el-image :src="diagramUrl" class="process-diagram-image">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </div>
        </el-collapse-transition>
      </div>
    </el-row>
    <selectOneUserDlg ref="selectOneUserDlg" />
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import selectOneUserDlg from '../../../sys/user/selectonedlg'
export default {
  name: 'AwardApproveForm',
  components: { selectOneUserDlg },
  data() {
    var needComment = (rule, value, callback) => {
      if (!this.form.passed && value.trim().length === 0) {
        callback(new Error('如果不通过审批，请在‘审批意见’输入原因!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      visable: false,
      diagramUrl: '',
      diagramShowed: false,
      diagramLoaded: false,
      form: {
        taskId: '',
        procInstId: '',
        entityId: '',
        comment: '',
        passed: null
      },
      rules: {
        passed: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        comment: [{ validator: needComment, trigger: 'blur' }]
      },
      tform: {
        userId: '',
        userName: ''
      },
      tRules: {
        userId: [
          { required: true, message: '必填', trigger: 'submit' }
        ]
      },
      entity: {
        id: null,
        applicantId: '',
        applicantName: '',
        applyTime: '',
        deptName: '',
        name: '',
        gotTime: '',
        typeName: '',
        winDept: '',
        winner: '',
        givingDept: '',
        publishLevelName: '',
        content: '',
        appendFiles: null
      },
      appendFileList: []
    }
  },
  methods: {
    cancel() {
      this.closeDlg()
    },
    showDiagram() {
      this.diagramShowed = !this.diagramShowed
      if (!this.diagramLoaded) {
        this.getDiagram()
      }
    },
    getDiagram() {
      request({ url: '/processImage/getDiagram', params: { procInstId: this.form.procInstId }, method: 'get' }).then(data => {
        this.diagramUrl = 'data:image/svg+xml;base64,' + data
        this.diagramLoaded = true
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    show(task) {
      this.form.taskId = task.taskId
      this.form.procInstId = task.procInstId
      request({ url: '/edu/award/' + task.businessKey, method: 'get' }).then(data => {
        this.entity = data
        this.form.entityId = data.id

        // appenfile
        if (this.entity.appendFiles) {
          this.appendFileList = JSON.parse(this.entity.appendFiles)
        }
        this.visable = true
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    doSubmit() {
      this.$refs['pform'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.doApprove()
        }
      })
    },
    doApprove() {
      request({ url: '/edu/award/approve', method: 'post', data: this.form }).then(res => {
        this.closeDlg()
        this.$notify({
          title: '提交审批成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.getList()
      }).catch(err => {
        this.loading = false
        this.$message.error('提交审批错误！' + err.message)
      })
    },
    doSelectUser() {
      this.$refs.selectOneUserDlg.show()
    },
    selectedUser(user) {
      if (user) {
        this.tform.userId = user.id
        this.tform.userName = user.name
      }
    },
    doTransfer() {
      this.$refs['tform'].validate((valid) => {
        if (valid) {
          this.loading = true
          const param = {}
          param.entityId = this.form.entityId
          param.taskId = this.form.taskId
          param.delegateUser = this.tform.userId
          request({ url: '/edu/award/delegate', method: 'post', data: param }).then(res => {
            this.closeDlg()
            this.$notify({
              title: '委托成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
            this.$parent.getList()
          }).catch(err => {
            this.loading = false
            this.$message.error('委托错误！' + err.message)
          })
        }
      })
    },
    closeDlg() {
      this.form = {
        procInstId: '',
        taskId: '',
        entityId: '',
        comment: '',
        passed: null
      }
      this.tform = {
        userId: '',
        userName: ''
      }
      this.visable = false
      this.diagramUrl = ''
      this.diagramLoaded = false
      this.diagramShowed = false
    }
  }
}
</script>
